<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机数据分析实训一</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>

</head>
<style>
    html , body , .content {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #ccc;
}
.content {
    padding: 40px;
}
.header {
    height: 10%;
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
    text-align: center;
}
.body {
    height: 100%;
    width: 100%;
    text-align: center;
}
.chartBox {
    width: 100%;
    height: 80%;
    margin-bottom:40px;
}
</style>
<body>
    <div class="content">
        <div class="header">手机数据分析实训一</div>
        <div class="body">
            <div class="chartBox" id="chartBox1"></div>
            <div class="chartBox" id="chartBox2"></div>
            <div class="chartBox" id="chartBox3"></div>
        </div>
    </div>
</body>
<script>
var dom1 = "chartBox1";
var dom2 = "chartBox2";
var dom3 = "chartBox3";
var chartObj1 = {};
var chartObj2 = {};
var chartObj3 = {};
var dataArr1 = [];
var dataArr2 = [];
var dataArr3 = [];
var option1 = {};
var option2 = {};
var option3 = {};

initEcharts(dataArr1,dataArr2,dataArr3, dom1,dom2,dom3);

setBarOption(dataArr1);
setPieOption(dataArr2);
setLineOption(dataArr3);

draw(chartObj1,option1);
draw(chartObj2,option2);
draw(chartObj3,option3);

console.log(dataArr1);
console.log(dataArr1);
console.log(dataArr3);



    function initEcharts(data1,data2,data3, dom1,dom2,dom3) {
        echarts1 = echarts.init($('#dom1'));
        echarts2 = echarts.init($('#dom2'));
        echarts3 = echarts.init($('#dom3'));
        dataArr1 = [[{%for i in tpbc_res%} '{{i.fld_brand_name}}',{%endfor%}],[{%for i in tpbc_res%}{{i.fld_sale_count}},{%endfor%}]]
    }

    function setBarOption(data) {
        option1 = {
            title:{
                text = 'demo'
            },
            xAxis:{
                data:dataArr1[0]
            },
            series:[{
                name:'xl',
                type:'bar',
                data:dataArr1[1]
            }]
        };
    }

    function setPieOption(data) {

    }

    function setLineOption(data) {

    }

    function draw(chartObj,option){
        chartObjsetOption(option);
    }
</script>
</html>